* {
    margin:0;
    padding:0;
    box-sizing:border-box ;
    font-family:'Popins' , sans-serif;
}
body
{
    background-color: #000;
}
section{
    position:relative ;
    width:100%;
    height:100vh;
    /* background:linear-gradient( #fff, #fff); */
    background:url(rashtriya-raksha-vidalay.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    overflow:hidden ;
    display:flex;
    justify-content:center;
    align-items:center;
}
section h2{
    color:#fff;
    font-size:2em;
    text-transform:uppercase ;
    text-shadow:0 1px 4px red;
}
section .set{
    position:absolute ;
    width:100%;
    height:90%;
    top:0;
    left:0;
    pointer-events:none;
}
section .set div{
    position:absolute ;
    display:block ;
    
}
section .set div:nth-child(1){
    left:25%;
    animation:animate 6s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(2){
    left:27%;
    bottom: 5%;
    animation:animate 5s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(3){
    left:8%;
    bottom: 5%;
    animation:animate 5s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(4){
    left:10%;
    bottom: 5%;
    animation:animate 4s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(5){
    left:80%;
    bottom: 5%;
    animation:animate1 7s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(6){
    left:78%;
    bottom: 5%;
    animation:animate1 6s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(7){
    left:76%;
    bottom: 5%;
    animation:animate1 5s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(8){
    left:74%;
    bottom: 5%;
    animation:animate1 4s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(9){
    left:9%;
    animation:animate 8s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(10){
    left:11%;
    bottom: 5%;
    animation:animate 7s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(11){
    left:13%;
    bottom: 5%;
    animation:animate 6s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(12){
    left:15%;
    bottom: 5%;
    animation:animate 5s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(13){
    left:72%;
    bottom: 5%;
    animation:animate1 8s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(14){
    left:70%;
    bottom: 5%;
    animation:animate1 7s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(15){
    left:68%;
    bottom: 5%;
    animation:animate1 6s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(16){
    left:66%;
    bottom: 5%;
    animation:animate1 5s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(17){
    left:17%;
    animation:animate 9s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(18){
    left:19%;
    bottom: 5%;
    animation:animate 8s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(19){
    left:21%;
    bottom: 5%;
    animation:animate 7s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(20){
    left:23%;
    bottom: 5%;
    animation:animate 6s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(21){
    left:64%;
    bottom: 5%;
    animation:animate1 9s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(22){
    left:80%;
    bottom: 5%;
    animation:animate1 8s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(23){
    left:84%;
    bottom: 5%;
    animation:animate1 7s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(24){
    left:82%;
    bottom: 5%;
    animation:animate1 6s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}

section .set div:nth-child(25){
    left:25%;
    animation:animate2 6s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(26){
    left:27%;
    bottom: 5%;
    animation:animate2 5s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(27){
    left:8%;
    bottom: 5%;
    animation:animate2 5s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(28){
    left:10%;
    bottom: 5%;
    animation:animate2 4s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(29){
    left:80%;
    bottom: 5%;
    animation:animate3 7s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(30){
    left:78%;
    bottom: 5%;
    animation:animate3 6s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(31){
    left:76%;
    bottom: 5%;
    animation:animate3 5s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(32){
    left:74%;
    bottom: 5%;
    animation:animate3 4s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(33){
    left:9%;
    animation:animate2 8s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(34){
    left:11%;
    bottom: 5%;
    animation:animate2 7s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(35){
    left:13%;
    bottom: 5%;
    animation:animate2 6s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(36){
    left:15%;
    bottom: 5%;
    animation:animate2 5s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(37){
    left:72%;
    bottom: 5%;
    animation:animate3 8s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(38){
    left:70%;
    bottom: 5%;
    animation:animate3 7s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(39){
    left:68%;
    bottom: 5%;
    animation:animate3 6s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(40){
    left:66%;
    bottom: 5%;
    animation:animate3 5s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(41){
    left:17%;
    animation:animate2 9s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(42){
    left:19%;
    bottom: 5%;
    animation:animate2 8s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(43){
    left:21%;
    bottom: 5%;
    animation:animate2 7s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(44){
    left:23%;
    bottom: 5%;
    animation:animate2 6s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(45){
    left:64%;
    bottom: 5%;
    animation:animate3 9s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(46){
    left:80%;
    bottom: 5%;
    animation:animate3 8s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(47){
    left:81%;
    bottom: 5%;
    animation:animate3 7s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}
section .set div:nth-child(48){
    left:82%;
    bottom: 5%;
    animation:animate3 6s linear normal ;
    animation-delay:-2s;
    animation-fill-mode: forwards;
}


@keyframes animate{
    0%{
        opacity:0;
        top: -10%;
        transform:translateX(20px) rotate(0deg);
    }
    10%{
        opacity:1;
    }
    20%{
        transform:translateX(20px) rotate(10deg);
    }
    40%{
        transform:translateX(20px) rotate(20deg);
    }
    60%{
        transform:translateX(20px) rotate(30deg);
    }
    80%{
        transform:translateX(20px) rotate(40deg);
    }
    100%{
        top: 95%;
        transform:translateX(20px) rotate(45deg);
    }
    
}

@keyframes animate1{
    0%{
        opacity:0;
        top: -10%;
        transform:translateX(20px) rotate(0deg);
    }
    10%{
        opacity:1;
    }
    20%{
        transform:translateX(20px) rotate(10deg);
    }
    40%{
        transform:translateX(20px) rotate(20deg);
    }
    60%{
        transform:translateX(20px) rotate(30deg);
    }
    80%{
        transform:translateX(20px) rotate(40deg);
    }
    100%{
        top: 95%;
        transform:translateX(20px) rotate(45deg);
    }
    
}

@keyframes animate2{
    0%{
        opacity:0;
        top: -10%;
        transform:translateX(20px) rotate(0deg);
    }
    10%{
        opacity:1;
    }
    20%{
        transform:translateX(20px) rotate(10deg);
    }
    40%{
        transform:translateX(20px) rotate(20deg);
    }
    60%{
        transform:translateX(20px) rotate(30deg);
    }
    80%{
        transform:translateX(20px) rotate(40deg);
    }
    100%{
        top: 85%;
        transform:translateX(20px) rotate(45deg);
    }
    
}

@keyframes animate3{
    0%{
        opacity:0;
        top: -10%;
        transform:translateX(20px) rotate(0deg);
    }
    10%{
        opacity:1;
    }
    20%{
        transform:translateX(20px) rotate(10deg);
    }
    40%{
        transform:translateX(20px) rotate(20deg);
    }
    60%{
        transform:translateX(20px) rotate(30deg);
    }
    80%{
        transform:translateX(20px) rotate(40deg);
    }
    100%{
        top: 85%;
        transform:translateX(20px) rotate(45deg);
    }
    
}

@keyframes animate4{
    0%{
        opacity:0;
        top: -10%;
        transform:translateX(20px) rotate(0deg);
    }
    10%{
        opacity:1;
    }
    20%{
        transform:translateX(20px) rotate(10deg);
    }
    40%{
        transform:translateX(20px) rotate(20deg);
    }
    60%{
        transform:translateX(20px) rotate(30deg);
    }
    80%{
        transform:translateX(20px) rotate(40deg);
    }
    100%{
        top: 75%;
        transform:translateX(20px) rotate(45deg);
    }
    
}

@keyframes animate5{
    0%{
        opacity:0;
        top: -10%;
        transform:translateX(20px) rotate(0deg);
    }
    10%{
        opacity:1;
    }
    20%{
        transform:translateX(20px) rotate(10deg);
    }
    40%{
        transform:translateX(20px) rotate(20deg);
    }
    60%{
        transform:translateX(20px) rotate(30deg);
    }
    80%{
        transform:translateX(20px) rotate(40deg);
    }
    100%{
        top: 75%;
        transform:translateX(20px) rotate(45deg);
    }
    
}
/* .set2{
    transform:scale(2) rotateY(180deg);
    filter:blur(2px);
}
.set3{
    transform:scale(0.8) rotateX(180deg);
    filter:blur(4px);
} */

.width10
{
    width: 10%;
}
.buttonprimary
{
    width: 100%;
    max-width: 35%;
    font-size: 1.4rem;
    text-align: center;
    /* background-image: url(Up.png); */
    background-color: #024f9f;
    color: #fff;
    border-radius: 24px;
    border-color: #000;
    border: 0;
    margin-top: 71vh;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
    /* position: relative; */
    padding: 15px;
    line-height: 1.8rem;

}

.buttonsecondry
{
    width: 100%;
    max-width: 35%;
    font-size: 1.4rem;
    text-align: center;
    /* background-image: url(Up.png); */
    background-color: #024f9f;
    color: #fff;
    border-radius: 24px;
    border-color: #000;
    border: 0;
    margin-top: 1%;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
    /* position: relative; */
    padding: 15px;
    line-height: 1.8rem;
}

@media (min-width:1366px) and (max-width:1366px)
{
    .buttonprimary
    {
        font-size: 1.15rem;
    }
    .buttonsecondry
    {
        font-size: 1.15rem;
    }
}

#messageone
{
    width: 70%;
    text-align: center;
    margin-left: 30%;
    font-size: 1rem;
    max-width: 40%;
}